<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width,initial-scale=1 user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>assets/css/public.css">
<link rel="stylesheet" href="<%=basePath%>assets/css/page.css">
<link rel="stylesheet"
	href="<%=basePath%>assets/font-awesome-4.7.0/css/font-awesome.min.css">

<title>晒单评价</title>
<script src="<%=basePath%>assets/js/jquery-1.8.3.min.js"></script>
<script src="<%=basePath%>assets/js/fontSize.js"></script>
<link href="<%=basePath%>/assets/layer/mobile/need/layer.css"
	rel="stylesheet" type="text/css">
<script src="<%=basePath%>/assets/layer/mobile/layer.js"></script>
<style> 
body{
	padding-top: 0.8rem;
}
#star {
	position: relative;
	height: 24px;
}

#star ul, #star span {
	float: left;
	display: inline;
	height: 19px;
	line-height: 19px;
}

#star ul {
	margin: 0 10px;
}

#star li {
	float: left;
	width: 24px;
	cursor: pointer;
	text-indent: -9999px;
	background: url(<%=basePath%>assets/images/star.png) no-repeat;
}

#star strong {
	color: #f60;
	padding-left: 10px;
}

#star li.on {
	background-position: 0 -28px;
}

.dptouxiang {
	width: 0.6rem;
	height: 0.6rem;
	margin: 0.2rem
}

.mspingfen .BOX #star {
	padding: 0.32rem 0
}

.plneirong {
	width: 90%;
	padding: 5%;
	border-top: 1px solid #f1f1f1;
	border-bottom: 1px solid #f1f1f1;
	margin-bottom: 0.1rem
}

.plneirong textarea {
	float: right;
	text-align: justify;
	width: 100%;
	border: none;
	font-size: 0.9em;
	color: #666;
}

.dppingfen .BOX {
	width: 90%;
	padding: 0 5%
}

.dppingfen .BOX #star {
	padding: 0.1rem 0
}

.dppfTitle {
	background: url("<%=basePath%>assets/imgMenu/sj.png") no-repeat 5%
		center;
	width: 80%;
	padding: 0 10%;
	height: 0.6rem;
	line-height: 0.6rem;
	background-size: 0.3rem
}
</style>
<script>
        $(function(){
            var aMsg = [
                "非常差|非常差",
                "差|差",
                "一般|一般",
                "好|好",
                "非常好|非常好"
            ];

            var arrStars = $('.BOX > div');//  几组星星

            for(var k = 0; k < $('.BOX > div').length; k++){
                arrStars[k].className = 'star0'+k;
                var star_arrLi = $('.star0'+[k] +'> .star_UL > li');//  几个星星
                var star_strong = $('.star0'+[k] +'> .star_result_span > strong');//星星后面的分数
                var star_a = $('.star0'+[k] +' > .star_result_span a');//星星后面的满意的程度

                fun(star_arrLi, star_strong ,star_a);
            }

            function fun(arrLi,strong ,strong_a ){
                for (var i =0; i<arrLi.length; i++) {
                    arrLi[i].index = i+1;
                    arrLi[i].onmouseover = function(){
                        //显现值几个星星
                        ShowTars(this.index);
                        strong.text(this.index + '分');// 星星后面的分数
                        strong_a.text(aMsg[this.index - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
                    };

                    //鼠标离开后恢复到上次显现的几个星星
                    arrLi[i].onmouseout = function() {
                        var sidNum = $(this).parents('ul').attr('sid');

                        if(sidNum == 0){
                            strong.text("");// 星星后面的分数
                            strong_a.text("");//星星后面的满意的程度
                        }else{
                            strong.text(sidNum + '分');// 星星后面的分数
                            strong_a.text(aMsg[sidNum - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
                        }
                        ShowTars(sidNum);// 显现值几个星星
                    };

                    //点击后进行评分处理
                    arrLi[i].onclick = function() {
                        strong.text(this.index + '分');// 星星后面的分数
                        strong_a.text(aMsg[this.index - 1].match(/\|(.+)/)[1]);//星星后面的满意的程度
                        $(this).parents('ul').attr('sid',this.index);
                    };
                }

                // 显现值几个星星
                function ShowTars(num) {
                    for(var i = 0; i < arrLi.length; i++)
                        arrLi[i].className = i < num ? "on" : "";
                };
            };
        });
        
        //提交评论
        function subBtn(){
        	var goodsId = '${goodsId}';
        	var userId = '${orders.userId}';
        	var merchantId = '${orders.merchantId}';
        	var orderId = '${orders.orderId}';
        	var miaosuScore = $('#miaosu').text().substr(0,1);
        	var miaosuText = $("#miaosuText").val();
        	var wuliuScore = $('#wuliu').text().substr(0,1);
        	var fuwuScore = $('#fuwu').text().substr(0,1);
        	if(miaosuScore==null||miaosuScore==''||miaosuScore==0){
        		layer.open({
	    		    content: '请对描述相符进行评分~'
	    		    ,skin: 'msg'
	    		    ,time: 2 //2秒后自动关闭
	    		  });
        		return false;
        	}else if(miaosuText==null||miaosuText==''){
        		layer.open({
	    		    content: '请写下您的高贵评价~'
	    		    ,skin: 'msg'
	    		    ,time: 2 //2秒后自动关闭
	    		  });
        		return false;
        	}else if(wuliuScore==null||wuliuScore==''||wuliuScore==0){
        		layer.open({
	    		    content: '请对物流服务进行评分~'
	    		    ,skin: 'msg'
	    		    ,time: 2 //2秒后自动关闭
	    		  });
        		return false;
        	}else if(fuwuScore==null||fuwuScore==''||fuwuScore==0){
        		layer.open({
	    		    content: '请对服务态度进行评分~'
	    		    ,skin: 'msg'
	    		    ,time: 2 //2秒后自动关闭
	    		  });
        		return false;
        	}else{
        		$.ajax({
        	    	url: $("#basePath").val()+"app/addGoodsAppraises",
        	        timeout: 300000,
        	        dataType: "json",
        	        type: "post",
        	        data: {
        	        	"goodsId":goodsId,
        	        	"merchantId":merchantId,
        	        	"orderId":orderId,
        	        	"userId":userId,
        	        	"goodsScore":miaosuScore,
        	        	"content":miaosuText,
        	        	"timeScore":wuliuScore,
        	        	"serviceScore":fuwuScore,
        	        },success : function(data) {
        	        	if(data.state==1){
        	        		layer.open({
            	    		    content: '您评价了一个订单~'
            	    		    ,skin: 'msg'
            	    		    ,time: 2 //2秒后自动关闭
            	    		  });
        	        		window.location.href=$("#basePath").val()+"app/getUserOrderList";
        	        	}else{
        	        		layer.open({
            	    		    content: '评价出现了点错误~'
            	    		    ,skin: 'msg'
            	    		    ,time: 2 //2秒后自动关闭
            	    		  });
        	        	}
        	        }
        	    });
        	}
        };
    	//返回上一层
    	function returnDescend(){
    		window.history.go(-1);
    	};
    </script>
</head>
<body>
	<input id="basePath" type="hidden" value="<%=basePath%>">
	<div class="header clearFirx">
		<a href="javascript:;" class="returnInfo" onclick="javascript:history.go(-1);"><i class="fa fa-angle-left"></i></a>
		发表评论
		<p style="float: right; margin-right: 0.2rem; font-size: 0.2rem;" onclick="subBtn()">发布</p>
	</div>
	<div class="content">
		<div class="mspingfen clearFirx">
			<img src="<%=basePath%>assets/images/timg.jpg" alt=""
				class="float_l dptouxiang">
			<div class="BOX">
				<div id="star" class="">
					<span>描述相符:</span>
					<ul class="star_UL" sid="0">
						<li><a href="javascript:;">1</a></li>
						<li><a href="javascript:;">2</a></li>
						<li><a href="javascript:;">3</a></li>
						<li><a href="javascript:;">4</a></li>
						<li><a href="javascript:;">5</a></li>
					</ul>
					<span class="star_result_span"> <strong id="miaosu"></strong>&nbsp;&nbsp;<a></a>
					</span>
				</div>

			</div>

		</div>
		<div class="plneirong clearFirx">
			<textarea rows="7" placeholder="请写下你的评价吧，对他人帮助很大哦～～" id="miaosuText"
				maxlength="500"></textarea>
		</div>
		<div class="dppingfen">
			<div class="dppfTitle">店铺评分</div>
			<div class="BOX">
				<div id="star" class="">
					<span>物流服务:</span>
					<ul class="star_UL" sid="0">
						<li><a href="javascript:;">1</a></li>
						<li><a href="javascript:;">2</a></li>
						<li><a href="javascript:;">3</a></li>
						<li><a href="javascript:;">4</a></li>
						<li><a href="javascript:;">5</a></li>
					</ul>
					<span class="star_result_span"> <strong id="wuliu"></strong>&nbsp;&nbsp;<a></a>
					</span>
				</div>
				<div id="star" class="">
					<span>服务态度:</span>
					<ul class="star_UL" sid="0">
						<li><a href="javascript:;">1</a></li>
						<li><a href="javascript:;">2</a></li>
						<li><a href="javascript:;">3</a></li>
						<li><a href="javascript:;">4</a></li>
						<li><a href="javascript:;">5</a></li>
					</ul>
					<span class="star_result_span"> <strong id="fuwu"></strong>&nbsp;&nbsp;<a></a>
					</span>
				</div>
			</div>
		</div>

	</div>
</body>
</html>